<template>
  <div class="register">
    <el-form ref="registerForm" :model="registerForm" :rules="registerRules" label-position="left" label-width="0px" class="register-form">
      <h3 class="register-title">注册</h3>
      <el-form-item prop="username">
        <el-input v-model="registerForm.username" type="text" auto-complete="off" placeholder="请输入登录账号" >
          <svg-icon slot="prefix" icon-class="user" class="el-input__icon" style="height: 39px;width: 13px;margin-left: 2px;" />
        </el-input>
      </el-form-item>
      <el-form-item prop="email">
        <el-input v-model="registerForm.email" type="text" auto-complete="off" placeholder="请输入邮箱" >
          <svg-icon slot="prefix" icon-class="user" class="el-input__icon" style="height: 39px;width: 13px;margin-left: 2px;" />
        </el-input>
      </el-form-item>
      <el-form-item prop="mobile">
        <el-input v-model="registerForm.mobile" type="text" auto-complete="off" placeholder="请输入手机号" >
          <svg-icon slot="prefix" icon-class="user" class="el-input__icon" style="height: 39px;width: 13px;margin-left: 2px;" />
        </el-input>
      </el-form-item>
      <el-form-item prop="realname">
        <el-input v-model="registerForm.realname" type="text" auto-complete="off" placeholder="请输入昵称" >
          <svg-icon slot="prefix" icon-class="user" class="el-input__icon" style="height: 39px;width: 13px;margin-left: 2px;" />
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="registerForm.password" type="password" auto-complete="off" placeholder="请输入密码" >
          <svg-icon slot="prefix" icon-class="user" class="el-input__icon" style="height: 39px;width: 13px;margin-left: 2px;" />
        </el-input>
      </el-form-item>
      <el-form-item prop="newpassword">
        <el-input v-model="registerForm.newpassword" type="password" auto-complete="off" placeholder="请再次输入密码" >
          <svg-icon slot="prefix" icon-class="user" class="el-input__icon" style="height: 39px;width: 13px;margin-left: 2px;" />
        </el-input>
      </el-form-item>
      <el-form-item prop="code">
        <el-input v-model="registerForm.code" type="text" auto-complete="off" placeholder="请输入验证码" >
          <svg-icon slot="prefix" icon-class="user" class="el-input__icon" style="height: 39px;width: 13px;margin-left: 2px;" />
        </el-input>
      </el-form-item>
      <el-form-item prop="isw">
        <div class="identifybox">
          <div @click="refreshCode">
            <s-identify :identify-code="identifyCode"/>
          </div>
          <el-button type= "text" class="textbtn" @click="refreshCode">看不清，换一张</el-button>
        </div>
      </el-form-item>
      <el-form-item style="width:100%;">
        <el-button :loading="loading" size="medium" type="primary" style="width:100%;" @click.native.prevent="handleRegister">
          <span v-if="!loading">注册</span>
          <span v-else>登 录 中...</span>
        </el-button>
        <el-button type= "text" class="loginbtn" @click="returnlogin">登录页面</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { md5 } from '@/utils/md5'
import { validateEMail, validatePhone, isPassword } from '@/utils/validate'
export default {
  name: 'Register',
  data() {
    return {
      identifyCodes: '1234567890',
      identifyCode: '',
      md5Pwd: '',
      registerForm: {
        username: '',
        realname: '',
        password: '',
        newpassword: '',
        email: '',
        code: '',
        mobile: ''
      },
      registerRules: {
        username: [{ required: true, trigger: 'blur', validator: this.validateUserName }],
        password: [{ required: true, trigger: 'blur', message: '密码不能为空', validator: isPassword }],
        realname: [{ required: true, trigger: 'blur', message: '昵称不能为空'  }],
        newpassword: [{ required: true, trigger: 'blur', validator: this.validateNewPassword }],
        code: [{ required: true, trigger: 'blur', validator: this.validateCode }],
        email: [{ required: true, trigger: 'blur', validator: validateEMail }],
        mobile: [{ required: true, trigger: 'blur', validator: validatePhone }]
      },
      loading: false,
      redirect: undefined
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  created() {
    // this.getCookie()
  },
  mounted() {
    this.identifyCode = ''
    this.makeCode(this.identifyCodes, 4)
  },
  methods: {
    validateNewPassword(rule, value, callback) {
      const password = this.registerForm.password
      const newPassword = this.registerForm.newpassword
      if (newPassword === '' || newPassword === undefined || newPassword === null) {
        callback(new Error('请输入确认密码'))
      } else {
        if (password !== newPassword) {
          callback(new Error('确认密码跟密码不一致'))
        }else{
          callback()
        }
      }
    },
    validateCode(rule, value, callback) {
      const code = this.registerForm.code
      if (code === '' || code === undefined || code === null) {
        callback(new Error('请输入验证码！'))
      } else {
        if (code !== this.identifyCode) {
          callback(new Error('验证码不正确！！'))
        }else{
          callback()
        }
      }
    },
    validateUserName: function (rule, value, callback) {
      const username = this.registerForm.username
      if (username === '' || username === undefined || username === null) {
        callback(new Error('请输入用户名'))
      } else if(!/^[\w]+$/.test(value)) {
        callback(new Error('用户名只能英文字母、数字及下划线的组合！'))
      }
      else{
          this.$store.dispatch('getUserByUserName', username).then((res) => {
            if (res != 'ok' && res != undefined && res != null) {
              callback(new Error(res))
            } else {
              callback()
            }
          }).catch(() => {
            this.loading = false
          })
      }
    },
    handleRegister() {
      this.$refs.registerForm.validate(valid => {
        let pass = this.registerForm.password
        pass = md5(pass)
        const user = {
          username: this.registerForm.username,
          password: pass,
          realname: this.registerForm.realname,
          mobile: this.registerForm.mobile,
          email: this.registerForm.email
        }
        if (valid) {
            this.loading = true
            // 注册
            this.$store.dispatch('Register', user).then(() => {
              this.loading = false
            }).catch(() => {
              this.loading = false
          })
        }
      })
    },
    returnlogin() {
      this.$router.push({ path: this.redirect || '/login' })
    },
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min)
    },
    refreshCode() {
      this.identifyCode = ''
      this.makeCode(this.identifyCodes, 4)
    },
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[
          this.randomNum(0, this.identifyCodes.length)
        ]
      }
      // console.log(this.identifyCode)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
  .register {
    display: flex;
    justify-content: center;
    align-items: center;
    background-image:url(	https://aurora-1255840532.cos.ap-chengdu.myqcloud.com/1547428971990.jpg);
    height: 100%;
  }
  .register-title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #707070;
  }
  @media (max-width: 768px){
    .register-form {
      border-radius: 6px;
      background: #ffffff;
      width: 100%;
      height: 100%;
      padding: 25px 25px 5px 25px;
      .el-input {
        height: 38px;
        input {
          height: 38px;
        }
        width: 100%;
      }
    }
  }
  @media (min-width: 768px){
    .register-form {
      border-radius: 6px;
      background: #ffffff;
      width: 40%;
      padding: 25px 25px 5px 25px;
      .el-input {
        height: 38px;
        input {
          height: 38px;
        }
        width: 80%;
      }
    }
  }
  .code {
   // margin: 400px auto;
    width: 114px;
    height: 40px;
   // border: 1px solid red;
  }
  .identifybox{
    display: flex;
    float: left;
    justify-content: space-between;
    margin-top:7px;
  }
  .loginbtn {
    text-align: center;
  }
</style>
